<template>
  <div class="tv-container">
    <div
      class="tv-content"
      :class="{ 'center-close': showContent, 'isdisplay': showContent && activeIndex === 1 }"
    >
      <!-- 内容和关闭按钮... -->
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const activeIndex = ref(-1);
    const showContent = ref(false);

    const go = (index) => {
      activeIndex.value = index;
      showContent.value = true;
    };

    const shut = () => {
      showContent.value = false;
    };

    return {
      activeIndex,
      showContent,
      go,
      shut
    };
  }
};
</script>

<style>
/* 样式... */

.center-close {
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;
}

/* 其他样式... */
</style>
